<script setup lang="ts">
import { onUnmounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
    popstyle?: any;
    maskstyle?: any;
}>();
const { $global, $fn } = props.ujt;
// 初始化pop数据
if (!props.id) {
    props.id = 'popdefaulttip';
}
if (!$global.pop[props.id]) {
    $global.pop[props.id] = {};
}
if (!$global.pop[props.id]?.zindex) {
    $global.pop[props.id].zindex = 101;
}
if (!$global.pop[props.id]?.popstyle) {
    if (props?.popstyle) {
        $global.pop[props.id].popstyle = props.popstyle;
    } else {
        $global.pop[props.id].popstyle = {
            width: 'auto',
            height: 'auto',
        };
    }
}
if (!$global.pop[props.id]?.maskstyle) {
    if (props?.maskstyle) {
        $global.pop[props.id].maskstyle = props.maskstyle;
    } else {
        $global.pop[props.id].maskstyle = {};
    }
}

function openPopTip(e: any) {
    $global.pop[props.id].popstyle.top = e.clientY + 'px';
    $global.pop[props.id].popstyle.left = e.clientX + 'px';
    $global.pop[props.id].popstyle.transform = `scale(${$global.scale})`;
    $global.pop[props.id].stat = $global.pop[props.id].stat ? 0 : 1;
}
function closePopTip() {
    $global.pop[props.id].stat = 0;
}
onUnmounted(() => {
    $global.pop[props.id] = {};
});
</script>

<template>
    <div :class="$global.pop[props.id]?.css + ' as-pop-tip'">
        <div class="as-pop-tip-des" @pointerdown.stop="openPopTip">
            <slot name="des">{{ $global.pop[props.id].des || '' }}</slot>
        </div>
        <teleport to="#popteleport" v-if="$global.pop[props.id].stat">
            <div
                class="as-pop-tip-mask"
                :style="$global.pop[props.id].maskstyle"
                @pointerdown.stop="closePopTip()"
                @touchstart="$fn.As.eStop"
            >
                <div
                    class="as-pop-tip-pop"
                    :id="'pop' + id"
                    :style="$global.pop[props.id].popstyle"
                    @pointerdown.stop=""
                >
                    <slot name="pop">
                        {{ $global.pop[props.id].con || '' }}
                    </slot>
                </div>
            </div>
        </teleport>
    </div>
</template>

<style scoped lang="scss">
.as-pop-tip {
    display: inline-block;
    .as-pop-tip-des {
        display: inline-block;
        width: auto;
        user-select: none;
        z-index: v-bind('$global.pop[props.id].zindex');
    }
}
.as-pop-tip-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: v-bind('$global.pop[props.id].zindex - 1');
    width: 100vw;
    height: 100vh;
    .as-pop-tip-pop {
        user-select: none;
        position: absolute;
        display: inline-flex;
        flex-direction: column;
        overflow: auto;
        transform-origin: 0 0;
    }
}
</style>
